<template>
	<view class="weight-total">
		<view class="cutButton" @click="cutPage">
			<text>{{pageName}}</text>
			<image class="icon" src="/static/index/down.png"></image>
		</view>
		<view class="content">
			<FatRateVue v-if="pageNumber==2"></FatRateVue>
			<WeightRatioVue  v-if="pageNumber==1"></WeightRatioVue>
		</view>
		<view class="options" v-if="showOption">
			<text @click="weightRatio">体重</text>
			<text @click="fatRate">体脂率</text>
			<button @click="cancel">取消</button>
		</view>
	</view>
</template>
<script setup>
	import{ref} from'vue';
	import WeightRatioVue from './weightComponents/WeightRatio.vue';
	import FatRateVue from './weightComponents/FatRate.vue';
	let pageName=ref("体重");
	let showOption=ref(false);
	let pageNumber=ref(1);
	//切换下端页面
	function cutPage(){
		showOption.value=true;
	}
	//取消按钮
	function cancel(){
		showOption.value=false;
	}
	//体重
	function weightRatio(){
		pageName.value="体重";
		pageNumber.value=1;
		showOption.value=false;
	}
	//体脂率
	function fatRate(){
		pageName.value="体脂率";
		pageNumber.value=2;
		showOption.value=false;
	}
	//肌肉率
	function muscleRate(){
		pageName.value="肌肉率";
		pageNumber.value=3;
		showOption.value=false;
	}
</script>
<style scoped>
	.weight-total{
		height:100vh;
		width:100%;
	}
	image{
		width: 50rpx;
		height:50rpx;
	}
	.icon{
		width:34rpx;
		height:34rpx;
		margin-top: 2rpx;
	}
	.cutButton{
		width: 100%;
		height:4%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding:0 0 8rpx 8rpx;
		position: fixed;
		top: 218rpx;
	}
	/* 选项盒子 */
	.options{
		width: 100%;
		height:400rpx;
		border-radius:25rpx 25rpx 0rpx 0rpx;
		background-color:#cbcbcb;
		font-size:40rpx;
	    display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index:1000;
	}
	.options>text{
		margin-left:30rpx;
	}
	button{
		width:80%;
		background-color: #9c9c9c
	}
</style>